body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  position: relative;
  /* position: relative; 相对定位：相对于之前的位置进行改变 */
  width: 420px;
  height: 640px;
  margin-top: 150px;
  background: rgba(0, 0, 0, 0.1);
  /* RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。 */
  transform: rotate(-30deg) skew(25deg) scale(0.8);
  /* deg = 度（Degress） */
  /* transform=改变: 
            rotate(angle)	定义 2D 旋转，在参数中规定角度。s
            skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
            scale(x[,y]?)	定义 2D 缩放转换。
                -- 值为.8 == 0.8缩放
                -- scale()的取值默认的值为1
                    -- 当值设置为0.01到0.99之间的任何值，作用使一个元素缩小
                    -- 而任何大于或等于1.01的值，作用是让元素放大
    */
  transition: 0.5s;
  /* transition = 过渡 */
  /* 
        div
            {
                width:100px;
                height:100px;
                background:blue;
                transition:width 2s;
                -moz-transition:width 2s;  -moz- 是火狐浏览器厂商前缀
                -webkit-transition:width 2s;  -webkit- 是谷歌浏览器厂商前缀
                -o-transition:width 2s+;  -o- 是opera浏览器厂商前缀
            }
        div:hover
            {
                width:300px;
            }
    */
}
@media (max-width: 800px) {
  .container {
    width: 320px;
    height: 540px;
  }
}
@media (max-width: 600px) {
  .container {
    width: 220px;
    height: 400px;
  }
}
@media (max-width: 400px) {
  .container {
    width: 160px;
    height: 280px;
  }
}
@media (max-width: 300px) {
  .container {
    width: 120px;
    height: 200px;
  }
}

.container img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}
.container:hover img:nth-child(4) {
  /* 
        :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
        :nth-child(odd)
        :nth-child(even)
        odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
    */
  transform: translate(160px, -160px);
  /* 
        translate(x,y)	定义 2D 转换
    */
  opacity: 1;
}
.container:hover img:nth-child(3) {
  transform: translate(120px, -120px);
  opacity: 0.8;
}
.container:hover img:nth-child(2) {
  transform: translate(80px, -80px);
  opacity: 0.6;
}
.container:hover img:nth-child(1) {
  transform: translate(40px, -40px);
  opacity: 0.4;
}
